<template>
  <div class="dibu">
   <van-tabbar route><!-- -->
    <van-tabbar-item :icon=item.icon v-for="(item,index) in jumpto" :to="item.url" :key="index" @click="jump(item.url,index)">{{item.content}}</van-tabbar-item>
  </van-tabbar>
    <div >
    <van-popup v-model:show="show"  position="bottom" :style="{ height: '35%' }">
      <div class="popup">
        <img src="../../assets/img/矢量智能对象@2x(23).png" alt="">
        <span>发供应</span>
      </div>
      <div class="popup">
        <img src="../../assets/img/矢量智能对象@2x(24).png" alt="">
        <span>发采购</span>
      </div>
      <b @click="closePopup">×</b>
    </van-popup>
    </div>
  </div>
</template>

<script>
import { ref,onMounted } from 'vue';
import {useRouter,useRoute} from "vue-router";
export default {
  setup() {
  
    const jumpto=ref([
      {
        icon:"home-o",
        content:"首页",
        url:"/home/index",
      },
      {
        icon:"apps-o",
        content:"分类",
        url:"/home/classic",
      },
      {
        icon:"add-o",
        content:"发布",
      },
      {
        icon:"label-o",
        content:"货单",
        url:"/home/manifest",
      },
      {
        icon:"manager-o",
        content:"我的",
        url:"/home/mine",
      },
    ])
    const router=useRouter();
    const show = ref(false);
    const jump=(url,i)=>{
      if(i!==2){
        router.push(url);
      }else{
        show.value = true;
      }
    }
    const closePopup=()=>{
      show.value=false;
    }

    return { jumpto,jump,show,closePopup};
  },
};
</script>
<style lang="scss" scoped>
.dibu{
  height:60px;
  width:100%;
  position:fixed;
  bottom:0;
  left:0;
  background: #fff;
  ul{
  height:60px;
  width:100%;
    display: flex;
    justify-content:space-between;
  }
  li{
    width:20%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-around;
    color:rgba(59, 55, 55, 0.548);
    img{
      width:35%;
      height:45%;
    }

  }
  .van-popup{
    position:relative !important;
  }
  .popup{
    display: inline-block;
    width:40%;
    font-size:16px;
    margin-left:25px;
    text-align: center;
    img{
      width:45%;
      margin-top:30px;
      margin-left:40px;
    }
    span{
      display:block;
      margin-top:10px;
      text-align: center;
    }
  }
  b{
    display:block;
    text-align: center;
    font-size: 40px;
    margin:20px auto 0;
    width:30px;
    height:40px;
    color:rgb(8, 133, 75);
    font-weight:300;
  }
}
</style>